<template>
  <div>
  <div>
    <i class="el-icon-discount" style="color: red;font-size: 20px"></i>
    <span style="font-size: 20px"><b>饮食管理</b></span></div><br>
    <el-button type="primary">查找全部</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input v-model="input" placeholder="请输入名称" style="width: 250px"></el-input>
    <el-button type="primary">查找</el-button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input v-model="input" placeholder="请输入序号" style="width: 250px"></el-input>
    <el-button type="primary">查找</el-button>
    <el-button type="primary" style="float: right" @click="dialogFormVisible1=true">添加</el-button>
    <el-dialog title="添加饮食" :visible.sync="dialogFormVisible1"  width="40%" >
      <addfood></addfood>
    </el-dialog>
    <el-divider></el-divider>
    <el-table

      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="number"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="foodname"
        label="名称"
        width="250">
      </el-table-column>
      <el-table-column
        prop="foodbrief"
        label="简介"
        width="350">
      </el-table-column>
      <el-table-column
        label="图片"
        prop="foodphoto"
        width="180">
        <template   slot-scope="scope">
        <el-image :src="scope.row.foodphoto" style="height: 60px;width: 60px; border-radius: 5px;  box-shadow: 0px 0px 6px #888888;">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="caloric"
        label="热量（大卡/100g）"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作">
        <template  slot-scope="scope">
          <router-link :to="{path:'/revisefood',query:{foodid:scope.row.id}}" style="text-decoration: none;" >
        <el-button size="mini" @click="dialogFormVisible2=true">修改</el-button>
          </router-link>
        <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Addfood from "./addfood";
export default {
  name: "details",
  components: {Addfood},
  data() {
    return {
      input:"",
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      foodtype:"",
      tableData: [],
    }
  },
  methods:{
    del(id){
      var foodid=id;
      console.log(foodid);
     var url="/food/delete/"+foodid;
      this.$axios.put(url)
        .then( (res)=> {
          if (res.data.code === 0) {
            this.$message({message:"删除成功！", type: 'success'})
            // function myMessage() {
            //   location.reload(true);
            // }
            // setTimeout(myMessage, 500);
            this.indexs();
          }
          else {
            this.$message({message:"删除失败！", type: 'error'})
          }
        }).catch(function (error) {
        console.log(error);
      } );

    },
    indexs(){
      this.foodtype = this.$route.query.foodtype;
      sessionStorage.setItem("foodtype",this.foodtype);
      var url = '/food/selectbytyle/'+this.foodtype;
      this.$axios.get(url)
        .then( (res)=> {
          console.log(res.data);
          this.tableData=[];
          for (var i = 0; i < res.data.data.length; i++) {
            let row = {} // 定义一个当前添加数据的行
            row.number=i+1;
            row.id=res.data.data[i].id;
            row.foodname=res.data.data[i].foodname;
            row.foodbrief=res.data.data[i].foodbrief;
            row.foodphoto=res.data.data[i].foodphoto;
            row.caloric=res.data.data[i].caloric;
            this.tableData.push(row);
          }
        }).catch(function (error) {
        console.log(error);
      } );
    }
  },
  created() {
   this.indexs()
  },
}
</script>

<style scoped>

</style>
